<template>
  <van-popup class="van-popup" :overlay="false" :show="show">
    <van-loading class="van-loading" type="spinner" vertical>
      加载中...
    </van-loading>
  </van-popup>
</template>

<script> 
import { provide, ref } from 'vue'

export default {
  props: {
    loading: { type: Boolean, default: false }
  },
  watch: {
    loading(newVal, oldVal) {
      this.show = newVal;
    }
  },
  mounted() { //  获取组件实例，并将组件实例进行挂载
    // provide('loading', this);
  },
  setup(props) {
    const show = ref(props.loading);
    const showLoading = () => {
      show.value = true;
    }

    const hideLoading = () => {
      show.value = false;
    }

    return { show, showLoading, hideLoading };
  }
}
</script>

<style lang="scss" scoped>
  .van-popup {
    border-radius: 1rem;
    overflow: hidden;
    background: rgb(26, 26, 26, .8);
  }

  .van-loading {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 14rem;
    height: 14rem;
    color: #fff;
  }
</style>